
<template>
    <div>
      <input v-model="firstName" type="text">
      <input v-model="lastName" type="text">
  
      <div>
        {{ firstName }}---{{ lastName }}
        <br>
        {{ name }}
      </div>
    </div>
  </template>
  
  
  <script setup lang="ts">
  import { ref, computed } from 'vue';
  const firstName = ref('')
  const lastName = ref('')
  // const name = computed(() => {
  //   return firstName.value + '---' + lastName.value
  // })
  // 第二种书写方式
  const name = computed({
    get(){
      return firstName.value + '---' + lastName.value
    },
    set(){
      firstName.value + '---' + lastName.value
    }
  })
  
  </script>
  <style>
  </style>


<!--
<template>
  <div>
    <table sytle="width:1500px" border>
      <thead>
        <tr>
          <td>名称</td>
          <td>数量</td>
          <td>单价</td>
          <td>单个商品总价</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr :key="index" v-for="(item, index) in data">
          <td align="center">{{ item.name }}</td>
          <td align="center">
            <button @click="AddORSub(item, false)">-</button>
            {{ item.num }}
            <button @click="AddORSub(item, true)">+</button>
          </td>
          <td align="center">{{ item.price }}</td>
          <td align="center">{{ item.num * item.price }}</td>
          <td align="center"><button @click="del(index)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>总价:{{$mytotal}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>


<script setup lang="ts">
import { computed } from '@vue/reactivity';
import { nextTick, reactive ,ref} from 'vue';
let $mytotal = ref<number>(0)

type Shop = {
  name:string,
  num:number,
  price:number
}


const data = reactive<Shop[]>([
  {
    name: "袜子",
    num: 1,
    price: 100
  },
  {
    name: "裤子",
    num: 1,
    price: 200
  },
  {
    name: "衣服",
    num: 1,
    price: 300
  },
  {
    name: "毛巾",
    num: 1,
    price: 400
  }
])


const AddORSub = (item: Shop, type: boolean): void => {
  if (item.num > 1 && !type) {
    item.num--
    // total()
  }
  if (item.num < 99 && type) {
    item.num++
    // total()
  }
}

const del=(index:number)=>{
  data.splice(index,1)
}

$mytotal = computed(()=>{
  return data.reduce((prev,next)=>{
    console.log('prev',prev)
    console.log('next',next)
    return prev + next.num*next.price
  },0)
})


// const total=()=>{
//   $mytotal.value = data.reduce((prev,next)=>{
//     return prev + next.num*next.price
//   },0)
// }
// total()


</script>


-->